﻿<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" type="image/x-icon" href="images/logo.png" media="screen" />
    <title>圣奥</title>
    <script src="./static/js/Common.js"></script>
    <script>
    </script>
    <style>
        aside {
            padding-top: 3px;
        }

        .el-button--primary:first-child:hover {
            border: rgb(64, 158, 255) 1px solid !important;
        }

        .el-submenu__icon-arrow {
            left: 200px;
            right: inherit;
        }

        .mCS-dark.mCSB_scrollTools .mCSB_draggerRail {
            background-color: #000;
            background-color: rgba(0, 0, 0, 0.0);
        }

        .mCSB_container {
            /* width: fit-content!important; */
            padding: 0 !important;
            margin: 0 !important;
        }

        #mCSB_1_dragger_vertical {
            min-height: 0;
            height: 0;
        }

        /* 左侧导航->抽屉形式 */
        .content-s {
            background-color: #f0f0f0 !important;
        }

        .el-menu--collapse {
            background-color: rgba(0, 0, 0, 0);
        }

        .content-s .el-submenu__title {
            background-color: #f0f0f0 !important;
        }

        .el-submenu__title {
            width: 219px;
            height: 50px !important;
            /* min-height: 55px !important; */
            /* border: 1px solid #fff !important; */
            /* padding-top: 10px; */
            margin: 0 5px;
        }

        .el-menu-item:hover,
        .el-submenu__title:hover {
            background-color: #006ab6;
            color: #fff !important;
        }

        .el-menu-item:hover,
        .el-submenu__title:hover .el-icon-arrow-right {
            color: #fff !important;
        }

        .content-s .el-submenu__title:hover {
            background-color: #12489e !important;
            color: #fff !important;
        }

        .content-s .el-submenu__title:hover .el-icon-arrow-right {
            color: #fff !important;
        }

        .el-submenu__title span {
            width: 190px !important;
            height: auto;
            display: block !important;
            white-space: normal !important;
            line-height: 15px;
            padding-top: 17px;
            /* margin-bottom: 22px; */
        }

        .el-submenu.is-active .el-submenu__title {
            border-bottom-color: #409EFF;
        }

        .el-menu--vertical {
            left: 225px !important;
        }

        .el-menu-item {
            height: 50px;
            line-height: 50px;
            margin: 0 5px !important;
        }

        .el-submenu .el-menu-item {
            padding: 0 0 0 20px !important
        }

        /* 左侧导航->抽屉形式 */
    </style>
</head>

<body>

    <div id="app" v-cloak>
        <el-container>
            <el-header height="100px">
                <header id="top" class="">
                    <img src="static/images/logo2.png" alt="">
                    <div id="top-text" class="fr">
                        <a href="" id="top-new">消息<span id="top-new-num">6</span></a>
                        <a href="" id="top-help">帮助</a>
                    </div>
                    <div id="top-per" class="fr">
                        <el-dropdown size="mini" split-button type="primary">
                            {{name}}
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item>
                                    <a href="javascript:void(0);" @click="signOut()">注销</a>
                                </el-dropdown-item>
                                <el-dropdown-item>
                                    <a href="javascript:void(0);" @click=" updatePwddialogVisible=true">修改密码</a>
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown> 
                    </div>
                </header>
            </el-header>
            <el-container :style="menuheight">
                <el-aside id="content-d" class="content-s" width="230px" style="">
                    <!-- <el-menu default-active="5fb42499-298c-4268-010c-08d6b33ff0d2" class="el-menu-vertical-demo">
                        <menus :menusdata="menuData" :pid="menuPid" v-on:toggle="dotest" :mainTabs="mainTabs"
                            :currentTab="currentTab"></menus>
                    </el-menu> -->
                    <el-menu default-active="5fb42499-298c-4268-010c-08d6b33ff0d2" class="el-menu-vertical-demo"
                        :collapse="true">
                        <menus :menusdata="menuData" :pid="menuPid" v-on:toggle="dotest" :mainTabs="mainTabs"
                            :currentTab="currentTab"></menus>
                    </el-menu>
                </el-aside>
                <el-main class="lay-main">
                    <el-tabs v-model="currentTab" type="card" closable @tab-remove="removeTab" @tab-click="clickTab">
                        <el-tab-pane v-for="(item, index) in mainTabs" :key="item.id" :label="item.name"
                            :name="item.id">
                            <!-- {{item.context}} -->
                            <span v-html="item.context"></span>


                        </el-tab-pane>
                    </el-tabs>

                    <div class="contextMenu" id="myMenu">
                        <ul class="ul-list">
                            <li id="close">关闭此标签</li>
                            <li id="closeOther">关闭其他</li>
                            <li id="closeLeft">关闭左侧</li>
                            <li id="closeRight">关闭右侧</li>
                        </ul>
                    </div>

                </el-main>
            </el-container>
            <el-footer style="height: 32px;background-color: #f3f3f3;border-top: 2px solid #dcdcdc;">
                <section id="footer-area">
                    <div style="width: 100%;margin: 4px auto;text-align: center;font-size: 14px; ">
                        Copyright © freehtml5templates.com|京ICP备11031630号-4
                    </div>
                </section>
            </el-footer>
        </el-container>

        <el-dialog title="修改密码" :visible="updatePwddialogVisible" fullscreen="true" @close="closeUpdatePwdDialog"
            width="80%" height="100%" top="10vh">
            <iframe ref="iframe" src="/System/SysUserUpdatePwd.html" style="height:300px;
                    width:100%" frameborder="0"></iframe>
        </el-dialog>
    </div>
    <script src="static/js/jquery.contextmenu_js/jquery.contextmenu.js"></script>
    <link href="./static/css/style.css" rel="stylesheet">
    <script src="./static/js/main.js"></script>

    <script>
        // (function ($) {
        //     $(window).load(function () {
        //         $.mCustomScrollbar.defaults.axis = "y";
        //         $("#content-d").mCustomScrollbar({ theme: "dark" });
        //         attrId()
        //         // $("#mCSB_1_container").mouseenter(function () {
        //         //     var needTitle = $("#mCSB_1_container div div li .el-submenu__title")
        //         //     var arrNeedTitle = new Array();
        //         //     for (i = 0; i < needTitle.length; i++) {
        //         //         var n = 'needTitle' + i;
        //         //         arrNeedTitle.push(n);
        //         //         needTitle.eq(i).attr("id", arrNeedTitle[i]);
        //         //     }
        //         // });
        //     });
        //     // $("aside").mouseenter(function () {
        //     //     // alert(1)
        //     //     $("#mCSB_1_scrollbar_vertical").css("display", "block");
        //     //     $("#mCSB_1_scrollbar_horizontal").css("display", "block");
        //     // });
        //     // $("aside").mouseleave(function () {
        //     //     $("#mCSB_1_scrollbar_vertical").css("display", "none");
        //     //     $("#mCSB_1_scrollbar_horizontal").css("display", "none");
        //     // });
        // })(jQuery);
        function attrId() {
            var needTitle = $(".00000000").parent("div.el-submenu__title")
            var arrNeedTitle = new Array();
            for (i = 0; i < needTitle.length; i++) {
                var n = 'needTitle' + i;
                arrNeedTitle.push(n);
                needTitle.eq(i).attr("id", arrNeedTitle[i]);
            }
        }
    </script>

</body>

</html>